import React from 'react';
import { Link } from 'react-router-dom';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { useTranslation } from 'react-i18next';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { toast } from '@/components/ui/use-toast';
import { Card, CardContent } from '@/components/ui/card';

const FormSchema = z.object({
    username: z.string().min(2, {
        message: 'Username must be at least 2 characters.' /* 用户名至少2个字符 */,
    }),
    email: z.string().email({
        message: 'Please enter the correct email address.' /* 请输入正确的邮箱 */,
    }),
    password: z.string().min(6, {
        message: 'password must be at least 6 characters.' /* 密码至少6个字符 */,
    }),
});

export default function RegisterPage() {
    const { t } = useTranslation();

    const form = useForm<z.infer<typeof FormSchema>>({
        resolver: zodResolver(FormSchema),
        defaultValues: {
            username: '',
            email: '',
            password: '',
        },
    });

    function onSubmit(data: z.infer<typeof FormSchema>) {
        toast({
            title: 'You submitted the following values:' /* 您提交了以下值 */,
            description: (
                <pre className='mt-2 w-[340px] rounded-md bg-slate-950 p-4'>
                    <code className='text-white'>{JSON.stringify(data, null, 2)}</code>
                </pre>
            ),
        });
    }

    return (
        <main className='w-[350px] mx-auto my-10'>
            <div className='flex flex-col space-y-2 text-center mb-4'>
                <h1 className='text-2xl font-semibold tracking-tight'>{t('register.title', '创建帐户')}</h1>
                <p className='text-sm text-muted-foreground'>{t('register.description', '输入您的信息创建帐户')}</p>
            </div>
            <Card className={cn('pt-6')}>
                <CardContent>
                    <Form {...form}>
                        <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-6'>
                            <FormField
                                control={form.control}
                                name='username'
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>{t('register.username', '用户名')}</FormLabel>
                                        <FormControl>
                                            <Input
                                                placeholder={t('register.usernamePlaceholder', '请输入用户名')}
                                                {...field}
                                            />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name='email'
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>{t('register.email', '邮箱')}</FormLabel>
                                        <FormControl>
                                            <Input
                                                placeholder={t('register.emailPlaceholder', '请输入邮箱')}
                                                {...field}
                                            />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name='password'
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>{t('register.password', '密码')}</FormLabel>
                                        <FormControl>
                                            <Input
                                                placeholder={t('register.passwordPlaceholder', '请输入密码')}
                                                {...field}
                                            />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                            <Button type='submit' className='w-full'>
                                {t('register.createAccount', '创建帐户')}
                            </Button>
                            <Button variant='outline' className='w-full'>
                                {t('register.registerGitHub', '使用GitHub注册')}
                            </Button>
                        </form>
                    </Form>
                    <div className='mt-4 text-center text-sm'>
                        <span className='mr-2'>{t('register.haveAccount', '已经有帐户？')}</span>
                        <Link to='/login' className='underline'>
                            {t('register.login', '登录')}
                        </Link>
                    </div>
                </CardContent>
            </Card>
            <div className='m-4'>用户协议</div>
        </main>
    );
}
